<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 
            link和visited是a标签独有的，注意点是必须遵循LVHA的顺序，LV包 HA哈哈
         */
      /* 选中没有访问过的a元素 */
      a:link {
        color: rosybrown;
      }

      /* 选中已经访问过的a元素 */
      a:visited {
        color: red;
      }
      /* 什么是伪元素？ --- 很像类，但不是类(Class)是元素<特殊状态>的一种描述 */

      a:hover {
        color: skyblue;
      }

      a:active {
        color: green;
      }

      /* 选中的是鼠标悬浮的p元素 */
      p:hover {
        color: skyblue;
      }

      /* 
        focus伪类只有 可以输入的标签可以用，例如input 和 select 
        这种聚焦不一定要点，只要让他处于输入状态就可以了
      */
      input:focus,
      select:focus {
        color: orange;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <a href="https://www.baidu.com">去百度</a>
    <a href="https://www.jd.com">去京东</a>

    <p>我是尚硅谷前端讲师张天宇</p>
    <input type="text" />

    <select name="" id="">
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
    </select>
  </body>
</html>
